CSS 相对颜色语法：掌握颜色操作，打造全球化网页设计

            color-mix(<color-space>, <color1> <percentage1>, <color2> <percentage2>)

            

              
                Copy
              
            
          

            
:root {
  --brand-primary: #007bff; /* A vibrant blue */
}

.button {
  background-color: var(--brand-primary);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  /* Darken the primary color by mixing with black */
  background-color: color-mix(in srgb, var(--brand-primary) 80%, black 20%);
}

.button:active {
  /* Further darken by mixing more with black */
  background-color: color-mix(in srgb, var(--brand-primary) 60%, black 40%);
}

            

              
                Copy
              
            
          

            
:root {
  --surface-color: #f0f8ff; /* AliceBlue */
}

.card {
  background-color: var(--surface-color);
  padding: 20px;
  border-radius: 8px;
}

.card-overlay {
  /* Create a slightly darker overlay for text */
  background-color: color-mix(in lch, var(--surface-color) 90%, black 10%);
  color: #333;
  padding: 15px;
  border-radius: 0 0 8px 8px;
}

.card-title {
  color: #000;
  font-weight: bold;
}

/* Example of ensuring text contrast */
.high-contrast-text {
  color: color-mix(in oklch, var(--surface-color) 10%, black 90%);
}

            

              
                Copy
              
            
          

            
.hero-section {
  /* Blend a primary color with a slightly lighter, desaturated version */
  background: linear-gradient(
    to right,
    color-mix(in oklch, var(--brand-primary) 90%, white 10%),
    color-mix(in oklch, var(--brand-primary) 70%, hsl(210 50% 50%) 30%)
  );
  color: white;
  padding: 50px;
}

            

              
                Copy
              
            
          

            
:root {
  --accent-hue: 200;
  --accent-saturation: 80%;
  --accent-lightness: 50%;
}

.widget {
  background-color: hsl(
    var(--accent-hue),
    var(--accent-saturation),
    var(--accent-lightness)
  );
}

.widget:hover {
  /* Increase lightness and decrease saturation for hover */
  background-color: color-mix(
    in hsl,
    hsl(
      var(--accent-hue),
      var(--accent-saturation),
      var(--accent-lightness)
    ) 80%,
    hsl(var(--accent-hue), 50%, 70%) 20%
  );
}

            

              
                Copy
              
            
          

            
.element {
  /* Select the best text color from the list for contrast against the background */
  color: color-contrast(var(--background-color) vs (#000, #fff, #333));

  /* Specify a minimum contrast ratio (e.g., WCAG AA for normal text is 4.5:1) */
  color: color-contrast(var(--background-color) vs (#000, #fff) AA);
}

            

              
                Copy
              
            
          

            
:root {
  /* Core Brand Colors */
  --brand-primary-base: #4A90E2; /* A pleasing blue */
  --brand-secondary-base: #50E3C2; /* A vibrant teal */

  /* Derived Colors for UI Elements */
  --primary-500: var(--brand-primary-base);
  --primary-600: color-mix(in oklch, var(--brand-primary-base) 85%, black 15%); /* Darker variant */
  --primary-400: color-mix(in oklch, var(--brand-primary-base) 95%, white 5%);  /* Lighter variant */

  --secondary-500: var(--brand-secondary-base);
  --secondary-600: color-mix(in oklch, var(--brand-secondary-base) 80%, black 20%);

  /* Neutral Palette */
  --neutral-900: #1a1a1a;
  --neutral-800: #333333;
  --neutral-700: #555555;
  --neutral-50: #f9f9f9;

  /* Derived Text Colors for Accessibility */
  --text-on-primary: white;
  --text-on-secondary: var(--neutral-900);
  --text-on-surface: var(--neutral-800);
  --text-on-dark: var(--neutral-50);
}

/* Example Usage */
.button-primary {
  background-color: var(--primary-500);
  color: var(--text-on-primary);
}

.button-primary:hover {
  background-color: var(--primary-600);
}

.card-background {
  background-color: var(--neutral-50);
  color: var(--text-on-surface);
}

            

              
                Copy
              
            
          

            
/* Default (Light Mode) Styles */
:root {
  --background-color: white;
  --text-color: #333;
  --card-background: #f9f9f9;
  --primary-color: #007bff;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a;
    --text-color: #f0f0f0;
    --card-background: #333333;
    /* Dark mode primary might be a slightly desaturated lighter blue */
    --primary-color: color-mix(in oklch, #007bff 70%, white 30%); 
  }

  /* Specific element overrides if needed */
  .dark-mode-specific-element {
    background-color: color-mix(in srgb, var(--primary-color) 50%, black);
  }
}

/* Applying styles */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.card {
  background-color: var(--card-background);
}

.button-primary {
  background-color: var(--primary-color);
}

            

              
                Copy
              
            
          

            
.button {
  /* Fallback for older browsers */
  background-color: #007bff;
  /* Modern syntax using color-mix */
  background-color: color-mix(in srgb, #007bff 80%, black 20%);
}

            

              
                Copy